<template>
	<view class="contribution-page">
		<view class="top-box">
			<view class="card-box">
				<view class="time-select" @click="showPopup">
					<view class="label">时间区间</view>
					<view class="time">
						<text class="text" v-if="seleceType == 1">{{ select[selectActive] }}</text>
						<text class="text" v-else>{{ timeStart }}至{{ timeEnd }}</text>
						<u-icon name="arrow-down-fill" color="#333" size="26rpx"></u-icon>
					</view>
				</view>
				<view class="data">
					<view class="item">
						<view class="label">可兑换</view>
						<view class="value">0</view>
					</view>
					<view class="item">
						<view class="label">累计</view>
						<view class="value">0</view>
					</view>
				</view>
				<button class="btn" @click="goExchange">兑换分红</button>
			</view>
		</view>
		
		<view class="list-box">
			<view class="title-box">贡献明细</view>
			<view class="list">
				<view class="item" v-for="(item, index) in 3" :key="index">
					<view class="left">
						<view class="title">贡献值</view>
						<view class="time">2025-01-07 14:23</view>
					</view>
					<view class="value">+10</view>
				</view>
			</view>
			<view class="empty-box">
				<u-empty mode="list"></u-empty>
			</view>
		</view>
		
		<u-popup :show="show" mode="bottom" round="30rpx" :safeAreaInsetBottom="false" zIndex="100" @close="show = false">
			<view class="popup-box">
				<view class="title-box">时间区间</view>
				<view class="select-box">
					<view class="title">快捷选择</view>
					<view class="quick mt-36">
						<view
							class="item" :class="{ 'active': index == popupActive }"
							v-for="(item, index) in select" :key="index"
							@click="quickSelect(index)"
						>{{ item }}</view>
					</view>
					<view class="title mt-48">快捷选择</view>
					<view class="select mt-36" @click="calendarShow = true">
						<input class="input" type="text" :value="popupStart" placeholder="选择时间" disabled />
						<view class="line"></view>
						<input class="input" type="text" :value="popupEnd" placeholder="选择时间" disabled />
					</view>
				</view>
				<view class="button-box">
					<button class="btn" @click="timeConfirm">确认</button>
				</view>
			</view>
		</u-popup>
		
		<u-calendar
			:show="calendarShow"
			mode="range"
			round="30rpx"
			color="#5749f6"
			@close="calendarShow = false"
			@confirm="calendarConfirm"
		/>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				/* 今天 */
				today: '',
				
				/* 时间选择 */
				seleceType: 1, // 1-快捷  2-时间段
				select: ['全部', '今日', '近7天', '近30天'],
				selectActive: 0,
				timeStart: '',
				timeEnd: '',
				
				/* 日期选择弹窗 */
				show: false,
				popopType: 1, // 1-快捷  2-时间段
				popupActive: 0,
				popupStart: '',
				popupEnd: '',
				
				calendarShow: false,
			}
		},
		onLoad () {
			const date = new Date()
			const year = date.getFullYear()
			const month = (date.getMonth() + 1).toString().padStart(2, '0')
			const day = date.getDate().toString().padStart(2, '0')
			
			this.today = `${year}-${month}-${day}`
		},
		methods: {
			goExchange () {
				uni.navigateTo({
					url: '/pages/my/exchangeDividend'
				})
			},
			showPopup () {
				this.popopType = this.seleceType
				this.popupActive = this.selectActive
				this.popupStart = this.timeStart
				this.popupEnd = this.timeEnd
				
				this.show = true
			},
			quickSelect (index) {
				this.popopType = 1
				this.popupActive = index
				
				if (index === 0) {
					this.popupStart = ''
					this.popupEnd = ''
				} else if (index === 1) {
					this.popupStart = this.today
					this.popupEnd = this.today
				} else if (index === 2) {
					let date = +new Date(this.today) - 604800000
					date = new Date(date)
					const year = date.getFullYear()
					const month = (date.getMonth() + 1).toString().padStart(2, '0')
					const day = date.getDate().toString().padStart(2, '0')
					
					this.popupStart = `${year}-${month}-${day}`
					this.popupEnd = this.today
				} else if (index === 3) {
					let date = +new Date(this.today) - 2592000000
					date = new Date(date)
					const year = date.getFullYear()
					const month = (date.getMonth() + 1).toString().padStart(2, '0')
					const day = date.getDate().toString().padStart(2, '0')
					
					this.popupStart = `${year}-${month}-${day}`
					this.popupEnd = this.today
				}
			},
			calendarConfirm (e) {
				this.popopType = 2
				this.popupActive = 0
				this.popupStart = e[0]
				this.popupEnd = e[e.length - 1]
				
				this.calendarShow = false
			},
			timeConfirm () {
				this.seleceType = this.popopType
				this.selectActive = this.popupActive
				this.timeStart = this.popupStart
				this.timeEnd = this.popupEnd
				
				this.show = false
			},
		}
	}
</script>

<style lang="scss">
.contribution-page {
	.top-box {
		padding: 28rpx;
		background: linear-gradient(0deg, #fff, #222);
		.card-box {
			padding: 38rpx 26rpx;
			border-radius: 16rpx;
			background-color: #fff;
			.time-select {
				height: 66rpx;
				padding: 0 36rpx;
				border-radius: 66rpx;
				background-color: #efeefe;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label {
					color: #333;
					font-size: 24rpx;
				}
				.time {
					display: flex;
					align-items: center;
					.text {
						margin-right: 4rpx;
						color: #5749f6;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}
			.data {
				margin-top: 36rpx;
				padding: 0 24rpx;
				display: flex;
				.item {
					width: 198rpx;
					.label {
						color: #666;
						font-size: 26rpx;
					}
					.value {
						margin-top: 10rpx;
						color: #333;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
			.btn {
				margin-top: 50rpx;
				border-radius: 90rpx;
				height: 90rpx;
				color: #fff;
				font-size: 32rpx;
				line-height: 90rpx;
				background-color: #5749f6;
			}
		}
	}
	.list-box {
		padding: 28rpx;
		.title-box {
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
		}
		.list {
			margin-top: 20rpx;
			.item {
				padding: 20rpx 28rpx;
				border-radius: 16rpx;
				background-color: #fff;
				box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				&:not(:last-child) {
					margin-bottom: 20rpx;
				}
				.left {
					flex: 1;
					.title {
						font-size: 28rpx;
					}
					.time {
						margin-top: 16rpx;
						color: #666;
						font-size: 24rpx;
					}
				}
				.value {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		.empty-box {
			margin-top: 260rpx;
		}
	}
	.popup-box {
		padding-bottom: 66rpx;
		.title-box {
			color: #333;
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			line-height: 98rpx;
		}
		.select-box {
			padding: 0 34rpx;
			.title {
				color: #666;
				font-size: 26rpx;
			}
			.quick {
				display: flex;
				justify-content: space-between;
				.item {
					width: 140rpx;
					height: 60rpx;
					border-radius: 8rpx;
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
					text-align: center;
					line-height: 60rpx;
					background-color: #f3f2f8;
					&.active {
						color: #fff;
						background-color: #5749f6;
					}
				}
			}
			.select {
				display: flex;
				align-items: center;
				gap: 24rpx;
				.input {
					width: 280rpx;
					height: 60rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					text-align: center;
					background: #f3f2f8 !important;
				}
				.line {
					width: 18rpx;
					height: 2rpx;
					background-color: #000;
				}
			}
		}
		.button-box {
			margin-top: 74rpx;
			padding: 0 34rpx;
			.btn {
				border-radius: 90rpx;
				height: 90rpx;
				color: #fff;
				font-size: 32rpx;
				line-height: 90rpx;
				background-color: #5749f6;
			}
		}
	}
}
</style>
